<%@ page language="java" import="java.util.*" pageEncoding="utf8" %>
<script src="js/jquery-1.4.4.js" type="text/javascript">
</script>
<link type="text/css" rel="stylesheet" href="style/regist.css"></link>
<script src="js/formValidator-4.0.1.js" type="text/javascript"
        charset="UTF-8">
</script>
<script src="js/formValidatorRegex.js" type="text/javascript"
        charset="UTF-8">
</script>

<script type="text/javascript">

    $(document).ready(function () {
        $.formValidator.initConfig({
            formID: "form1"
        });
        $("#psw").formValidator({
            onShow: "",
            onFocus: "至少1个长度",
            onCorrect: "密码合法"
        }).inputValidator({
            min: 1,
            empty: {
                leftEmpty: false,
                rightEmpty: false,
                emptyError: "密码两边不能有空符号"
            },
            onError: "密码不能为空,请确认"
        });
        $("#psw2").formValidator({
            onShow: "",
            onFocus: "至少1个长度",
            onCorrect: "密码一致"
        }).inputValidator({
            min: 1,
            empty: {
                leftEmpty: false,
                rightEmpty: false,
                emptyError: "重复密码两边不能有空符号"
            },
            onError: "重复密码不能为空,请确认"
        }).compareValidator({
            desID: "psw",
            operateor: "=",
            onError: "2次密码不一致,请确认"
        });
        $("#mobile").formValidator({
            empty: false,
            onShow: "",
            onFocus: "请输入手机号码",
            onCorrect: "输入正确"
        }).inputValidator({
            min: 11,
            max: 11,
            onError: "手机号码必须是11位的,请确认"
        }).regexValidator({
            regExp: "mobile",
            dataType: "enum",
            onError: "你输入的手机号码格式不正确"
        });
        $("#qq").formValidator({
            empty: false,
            onShow: "",
            onCorrect: "输入正确"
        }).inputValidator({
            min: 5,
            max: 10
        }).regexValidator({
            regExp: "qq",
            dataType: "enum",
            onError: "你输入的qq号码格式不正确"
        });
        $("#email").formValidator({
            onShow: "",
            onFocus: "邮箱6-100个字符"
        }).inputValidator({
            min: 6,
            max: 100, onError: "你输入的邮箱长度非法,请确认"
        }).regexValidator({
            regExp: "^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",
            onError: "你输入的邮箱格式不正确"
        });
    });


    var XMLHttpReq;
    function userClick() {
        if (document.form1.username.value == "") {

            document.getElementById("usernameTip").innerHTML = "用户名不能为空";
        }
        if (document.form1.username.value != "") {
            var url = "CheckUserName?username=" + document.form1.username.value;
            sendRequest(url);
        }

    }
    function sendRequest(url) {
        if (window.XMLHttpRequest) {
            XMLHttpReq = new XMLHttpRequest();
        }
        if (window.ActiveXObject) {
            XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        XMLHttpReq.open("POST", url, true);

        XMLHttpReq.onreadystatechange = processRequest;//设置回调函数
        XMLHttpReq.send(null);//发布函数
    }
    function processRequest() {
        if (XMLHttpReq.readyState == 4 && XMLHttpReq.status == 200) {
            var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0];
            if (res.firstChild.data != "false") {
                document.getElementById("usernameTip").innerHTML = "该用户名已存在";
            }
            else {
                document.getElementById("usernameTip").innerHTML = "该用户名可以注册";
            }
        }
    }

    function submit() {
        document.form1.action = "Regist";
        document.form1.method = "post";
        document.form1.submit();
    }
</script>

<div class="DaoHang">您当前位置：<a href="/">淘商城</a> &gt; 用户注册</div>
<div class="regist_body">
    <div class="regist_table">
        <form action="Regist" method="post" id="form1" name="form1">
            <table style="width:600px; height:450px; border:0px; align:right; cellpadding:0px; cellspacing:0px; ">

                <tr valign="middle">
                    <td colspan="3" align="left"><img src="images/regist_tail.gif"></td>

                </tr>
                <tr valign="middle">
                    <td align="right">
                        用户名
                    </td>
                    <td align="center">
                        <input type="text" name="username" id="username" onBlur="userClick();">
                        <font color="red">*</font>
                        <br></td>
                    <td>
                        <div id="usernameTip" style="width: 250px ;color:red"></div>
                    </td>
                </tr>
                <tr>
                    <td align="right"> 密 码</td>
                    <td align="center">
                        <input type="password" name="psw" id="psw">
                        <font color="red">*</font>
                        <br></td>
                    <td>
                        <div id="pswTip" style="width: 250px"></div>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        确认密码
                    </td>
                    <td align="center">
                        <input type="password" name="psw2" id="psw2">
                        <font color="red">*</font>
                        <br></td>
                    <td>
                        <div id="psw2Tip" style="width: 250px"></div>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        email
                    </td>
                    <td align="center">
                        <input type="text" name="email" id="email">
                        <font color="red">*</font>
                        <br></td>
                    <td>
                        <div id="emailTip" style="width: 250px"></div>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        手机号码
                    </td>
                    <td align="center">
                        <input type="text" name="mobile" id="mobile">
                        <font color="red">*</font>
                        <br></td>
                    <td>
                        <div id="mobileTip" style="width: 250px"></div>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        QQ
                    </td>
                    <td align="center">
                        <input type="text" name="qq" id="qq">
                        <font color="red">*</font>
                        <br></td>
                    <td>
                        <div id="qqTip" style="width: 250px"></div>
                    </td>
                </tr>
                <tr align="right">
                    <td height="77" colspan="2">
                        <input type="checkbox" value="yes" name="check"/>
                        我已看过并接受《用户协议》
                    </td>
                </tr>
                <tr align="center">
                    <td height="42" colspan="2">
                        <input type="image" src="images/regist_submit_button1.gif" onclick="submit()"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
